<template>
	<div>
		<!-- 1.0 头部导航结构 -->
		<MyNavbar title="我的关注"></MyNavbar>
		<!-- 2.0 关注列表 -->
		<div class="list">
			<div class="item" v-for="(item, index) in follows" :key="item.id">
				<van-image class="avatar" :src="item.head_img | imgUrl"></van-image>
				<div class="info">
					<h4 class="username">{{ item.nickname }}</h4>
					<p class="date">{{ item.create_date | formatTime }}</p>
				</div>
				<div
					class="btn"
					:class="{ danger: !item.isFollow }"
					@click="followFn(index, item.id)"
				>
					{{ item.isFollow ? '取消关注' : '添加关注' }}
				</div>
			</div>
		</div>
		<!-- 空状态 -->
		<van-empty v-if="!follows.length" description="空空如也" />
	</div>
</template>

<script>
import { getUserFollowAPI, followAPI, unFollowAPI } from '../api/user.js';
import MyNavbar from '../components/MyNavbar.vue';
export default {
	components: {
		MyNavbar
	},
	data() {
		return {
			follows: []
		};
	},
	async created() {
		const result = (await getUserFollowAPI()).data.data;
		console.log(result);
		this.follows = result.map(item => ({ ...item, isFollow: true }));
	},
	methods: {
		async followFn(index, id) {
			const { isFollow } = this.follows[index];
			const { message } = isFollow
				? (await unFollowAPI(id)).data
				: (await followAPI(id)).data;
			this.follows[index].isFollow = !isFollow;
			this.$toast(message);
		}
	}
};
</script>

<style lang="less" scoped>
.list {
	.item {
		height: 80px;
		border-bottom: 1px solid #ddd;
		display: flex;
		align-items: center;
		padding: 0 20px;
		.avatar {
			width: 40px;
			height: 40px;
		}
		.info {
			flex: 1;
			margin-left: 20px;
			.username {
				font-size: 16px;
			}
			.date {
				font-size: 13px;
				margin-top: 5px;
				color: #666;
			}
		}
		.btn {
			width: 75px;
			line-height: 30px;
			text-align: center;
			background-color: #e1e1e1;
			border-radius: 50px;
			font-size: 12px;
		}
		.danger {
			background-color: red;
			color: #fff;
		}
	}
}
</style>
